<template>
	<view class="content">
		<view class="head">声动我心 配音大赛</view>
		<view class="main">
			<view class="item" style="color: #fff;" v-if="rFVoteList.length == 0">
				报名比赛尚未开始
			</view>
			<view v-else>
				<view class="item" style="color: #fff;" >
					剩余点赞数量：{{remainingLikes}}
				</view>
				<view class="item" v-for="(item,index) in rFVoteList[0].registrationForms">
					
					<view class="index">{{index+1}}</view>
					
					<view class="player" @click="play(item.work,index)">
					</view>  
					<view class="info">
						<p class="name">作品名称:{{item.title}}</p>
						<p class="name">主播名:{{item.age}}</p>
						<p class="sd">赛道：{{item.registrationRacetrack.raceTrackName}}</p>
					</view>
					<view class="like" @click="like(item.id,item)">
						<image class="star" src="../../static/image/star.png" ></image>
						{{item.likeds}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vote from '@/api/vote.js'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				//页面需要展示的信息
				rFVoteList:[],
				competitionId:null,
				index:null,
				//剩余点赞数量
				remainingLikes:0
			}
		},
		onLoad(e){
			this.competitionId = e.competitionId
			//获取用户openid存储一下
			this.tokenOpenid = uni.getStorageSync("token_openid");
			this.getRegistrationInformationVote()
		},
		async onShow(){
			await this.getRemainingLikes()
		},
		methods: {
			getRemainingLikes(){
				let data = {
					tokenOpenid: this.tokenOpenid
				}
				vote.get_remaining_likes(data).then(res=>{
					if(res.code == 200){
						this.remainingLikes = res.data.remainingLikes
					}
				})
			},
			like(id,e){
				if(this.remainingLikes == 0){
					//没有点赞数量了
					uni.showToast({
						title: '今日点赞数量已使用完, 请明天再来',
						icon:'none',
						duration: 2000
					});
					return
				}
				//发送点赞请求
				let data = {
					tokenOpenid:this.tokenOpenid,
					formId:id
				}
				uni.showLoading({
					title: '处理中'
				});
				vote.work_like(data).then(res=>{
					if(res.code == 200){
						if(res.data == true){
							console.log(e)
							this.remainingLikes--
							e.likeds++
						}
					}
					uni.hideLoading();
				})
				
			},
			getRegistrationInformationVote(){
				let data = {
					competitionId:this.competitionId
				}
				vote.get_registration_information_vote(data).then(res=>{
					if(res.code == 200){
						this.rFVoteList = res.data
					}
					
				})
			},
			play(e,id){
				if(this.index != id){
					innerAudioContext.destroy();
					//修改正在播放的音乐的id号
					this.index = id
					//设置音乐的src
					innerAudioContext.src = e;
					innerAudioContext.autoplay = true;
					if(innerAudioContext.paused){
						//没有播放音乐
						innerAudioContext.onPlay(() => {
							console.log("开始播放音乐11111111111111111111")
						})
					}else{
						//如果再播放就销毁
						innerAudioContext.destroy();
					}
				}else{
					if(innerAudioContext.paused){
						innerAudioContext.autoplay = true;
						innerAudioContext.src = e;
						innerAudioContext.onPlay(() => {
						 console.log("播放音乐")
						})
					}else{
						innerAudioContext.destroy();
					}
				}
				
			}
		}
	}
</script>


<style lang="scss" scoped>
	page{
		height: 100%;
		background-image: url(../../static/image/bgimg.png);
		background-attachment: fixed;
	}
	.content{
		.head{
			padding-top: 30rpx;
			font-size: 70rpx;
			font-weight: 700;
			text-align: center;
			color: rgba(229,206,165,.7);
		}
		.item{
			background-color: rgb(48,49,44);
			margin: 20rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 20rpx 20rpx 10rpx;
			border-radius: 20rpx;
			.index{
				text-align: right;
				width: 30rpx;
				font-size: 30rpx;
				font-weight: 700;
				margin-right: 40rpx;
				color: rgb(219,219,219);
			}
			.player{
				border-radius: 50%;
				width: 60px; 
				height: 60px;
				background: url(../../static/image/amys.jpg) no-repeat;
				background-size: 100%;
			}
			.info{
				margin-left: 20rpx;
				width: 37%;
				.name{
					font-size: 25rpx;
					color: rgb(204,205,200);
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; 
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					
				}
				.sd{
					margin-top: 20rpx;
					font-size: 20rpx;
					color: rgb(137,138,133);
				}
			}
			.like{
				margin-left: auto;
				padding: 10rpx 60rpx;
				color: rgb(219,219,219);
				font-weight: 600;
				background-color: rgb(62,62,61);
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.star{
					margin-right: 5rpx;
					height: 30rpx;
					width: 30rpx;
				}
			}
		}
		.main{
			margin-top: 40rpx;
			width: 100%;
			height: 70%;
			padding: 0rpx 40rpx;
			box-sizing:border-box;
		}
	}
	/deep/.uni-scroll-view {
		background-color: #fff;	
	}
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}

</style>
